<template>

  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formInline.studentNumber" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.name" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <br/>

    <el-row>
      <el-upload
          :action="this.$BASE_URL+'/system/importStudent'"
          :file-list="fileList"
          :limit="1"
          :headers="{'token':this.token}"
          accept=".xls,.xlsx"
          :on-success="handleSuccess"
          :on-progress="handlePreview"
          ref="upload">

        <el-button icon="el-icon-upload" slot="trigger" type="primary" style="margin-left: 10px">导入</el-button>

        <!--        <el-button-->
        <!--            type="warning"-->
        <!--            icon="el-icon-download"-->
        <!--            @click="downloadData"-->
        <!--            style="margin-left: 30px"-->
        <!--        >导出-->
        <!--        </el-button>-->
        <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="openAddForm"
            style="margin-left: 30px"
        >新增
        </el-button>

        <div slot="tip" class="el-upload__tip" style="margin-left: 10px">只能上传xls或xlsx文件</div>
      </el-upload>

    </el-row>
    <br/>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column type="index" label="编号" width="65"/>
      <el-table-column
          prop="studentNumber"
          label="账号"
          width="100"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="100"
      >
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话号码"
          width="120"
      >
      </el-table-column>


      <el-table-column
          prop="grade"
          label="年级"
          width="60"
      >
      </el-table-column>
      <el-table-column
          prop="schoolName"
          label="二级学院"
      >
      </el-table-column>

      <el-table-column
          prop="majorName"
          label="专业"
      >
      </el-table-column>

      <el-table-column
          prop="clazzName"
          label="班级"
      >
      </el-table-column>
      <el-table-column
          prop="staffName"
          label="辅导员"
          width="100"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200"
      >
        <template slot-scope="scope">
          <!-- <el-button @click="resetPassword(scope.row)" type="text" size="small">密码重置</el-button> -->
          <el-tooltip content="重置密码" placement="top">
            <el-button
                @click="resetPassword(scope.row)"
                type="warning"
                size="small"
                icon="el-icon-refresh-left"
                circle

            ></el-button>
          </el-tooltip>
          <el-tooltip content="修改" placement="top">
            <el-button
                @click="openEditStaffForm(scope.row)"
                type="primary"
                size="small"
                icon="el-icon-edit"
                circle

            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
                @click="deleteStudent(scope.row)"
                type="danger"
                size="small"
                icon="el-icon-delete"
                circle

            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="学生信息" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="studentInfo" ref="studentInfoForm" :rules="rules">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="studentNumber">
          <el-input v-model="studentInfo.studentNumber" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="studentInfo.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="studentInfo.phone" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="年级" :label-width="formLabelWidth" prop="grade">
          <el-input v-model="studentInfo.grade" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="二级学院" :label-width="formLabelWidth" prop="deptNumber">
          <el-select v-model="studentInfo.deptNumber" placeholder="请选择所属二级学院" @change="changeDept" filterable
                     style="width: 320px">
            <el-option v-for="dept in deptList" :label="dept.dname" :value="dept.deptNumber"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="专业名称" :label-width="formLabelWidth" prop="majorNumber">
          <el-select v-model="studentInfo.majorNumber" placeholder="请选择所属专业" @change="changeMajor" filterable style="width: 320px">
            <el-option v-for="major in majorList" :label="major.name" :value="major.majorNumber">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级名称" :label-width="formLabelWidth" prop="clazzNumber">
          <el-select v-model="studentInfo.clazzNumber" placeholder="请选择所属班级" style="width: 320px" @change="changeClazz">
            <el-option v-for="clazz in clazzList" :label="clazz.name" :value="clazz.clazzNumber"></el-option>

          </el-select>
        </el-form-item>


        <el-form-item label="辅导员" :label-width="formLabelWidth" prop="staffName">
          <el-input v-model="studentInfo.staffName" autocomplete="off" disabled style="width: 320px"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerAddOrModify">确 定</el-button>
      </div>
    </el-dialog>


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNumber"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import {Message} from "element-ui";
import pagination from "../layout/pagination";

export default {
  name: "studentManage",
  components: {
    pagination
  },
  created() {
    this.queryDept();
    this.query();
  },

  methods: {

    queryDept(params) {
      axios({
        url: this.$BASE_URL + "/system/getDepartmentList",
        headers: {
          token: this.token
        },
        params: params
      }).then(resp => {
        if (resp.data.code === 200) {
          this.deptList = resp.data.data;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })

    },
    queryMajor(params) {
      axios({
        url: this.$BASE_URL + "/system/findMajorList",
        headers: {
          token: this.token
        },
        params: params
      }).then(resp => {
        if (resp.data.code === 200) {
          this.majorList = resp.data.data;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
    },
    queryClazz(params) {
      axios({
        url: this.$BASE_URL + "/system/findClazzList",
        headers: {
          token: this.token
        },
        params: params
      }).then(resp => {
        if (resp.data.code === 200) {
          this.clazzList = resp.data.data;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
    },

    changeMajor(currentMajorNumber) {
      // 该专业前先清空之前的班级信息
      this.clazzList = [];
      this.studentInfo.clazzNumber = "";
      this.queryClazz({majorNumber: currentMajorNumber})

    },
    changeDept(currentDeptNumber) {
      // 更改二级学院 先清空之前的班级和专业
      this.clazzList = [];
      this.majorList = [];
      this.studentInfo.majorNumber = "";
      this.studentInfo.clazzNumber = "";
      this.queryMajor({deptNumber: currentDeptNumber})

    },
    changeClazz(currentClazzNumber) {
      axios({
        url: this.$BASE_URL + "/system/findClazzInfo",
        headers: {
          token: this.token
        },
        params: {
          clazzNumber: currentClazzNumber
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          this.studentInfo.staffName = resp.data.data.staffName;
          this.studentInfo.staffNumber = resp.data.data.staffNumber;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
    },
    resetPassword(row) {
      this.$confirm('是否重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url: this.$BASE_URL + "/system/resetPwd",
          headers: {
            token: localStorage.getItem("token")
          },
          params: {
            userName: row.studentNumber
          }
        }).then(resp => {
          if (resp.data.code === 200) {
            Message.success(resp.data.msg)
          } else {
            Message.error(resp.data.msg)
          }
        }, err => {
          Message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    query() {
      axios({
        url: this.$BASE_URL + "/system/getStudentList",
        params: this.formInline,
        headers: {
          token: this.token
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          this.tableData = resp.data.data.list;
          this.total = resp.data.data.total;

        } else {
          Message.error(resp.data.msg)
        }

      }, err => {
        Message.error(err.msg)
      })
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {

      this.formInline.pageNumber = val
      this.query()
    },

    handlePreview() {
      this.$message("正在导入，请稍后... 导入所需时间可能较长，请在收到导入成功提示后继续操作")
    },
    handleSuccess(resp, file, fileList) {
      let message = {
        message: "恭喜，导入成功",
        type: "success"
      }
      if (resp.code != "200") {
        message.message = "对不起，导入失败：" + resp.msg
        message.type = "error"
      }
      this.$message(message)
    },


    handlerAddOrModify() {
      let url = this.$BASE_URL + "/system/updateStudent";
      if (this.isAddStudent) {
        url = this.$BASE_URL + "/system/insertStudent"
      }
      this.$refs["studentInfoForm"].validate((valid) => {
        if (valid) {
          axios({
            url: url,
            headers: {
              token: this.token
            },
            method: "POST",
            params: this.studentInfo
          }).then(resp => {
            if (resp.data.code === 200) {
              Message.success(resp.data.msg)
              this.dialogFormVisible = false;
              this.query();
            } else {
              Message.error(resp.data.msg)
            }
          }, err => {
            Message.error(err.msg)
          })
        }
      })

    },
    openEditStaffForm(row) {
      this.dialogFormVisible = true;
      this.isAddStudent = false;
      this.studentInfo = {};
      axios({
        url: this.$BASE_URL + "/system/findStudentInfo",
        headers: {
          token: this.token
        },
        params: row
      }).then(resp => {
        if (resp.data.code === 200) {
          this.studentInfo = resp.data.data;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
      this.queryMajor({deptNumber: this.studentInfo.deptNumber});
      this.queryClazz({majorNumber: this.studentInfo.majorNumber});

    },
    openAddForm() {
      this.studentInfo = {
        clazzNumber: '',
        majorNumber: '',
        staffName: '',
        staffNumber:'',
        phone:'',
        deptNumber:''
      };
      this.dialogFormVisible = true;
      this.isAddStudent = true;
      this.majorList = [];
      this.clazzList = [];
    },
    deleteStudent(row) {
      axios({
        url: this.$BASE_URL + "/system/deleteStudentByStudentNumber",
        method: "POST",
        headers: {
          token: this.token
        },
        params: {
          id: row.id,
          studentNumber: row.studentNumber,
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          Message.success(resp.data.msg)
          this.query();
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
    }
  },
  data() {
    return {
      fileList: [],
      deptList: [],
      majorList: [],
      clazzList: [],
      formLabelWidth: "80px",
      rules: {
        name: [
          {required: true, message: '请输入教职工名称', trigger: 'blur'}
        ],
        grade: [
          {required: true, message: '请输入年级', trigger: 'blur'}
        ],
        studentNumber: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'}
        ],
        majorNumber: [
          {required: true, message: '请选择专业', trigger: 'change'}
        ],
        deptNumber: [
          {required: true, message: '请选择二级学院', trigger: 'change'}
        ],
        clazzNumber: [
          {required: true, message: '请选择班级', trigger: 'change'}
        ],

      },
      dialogFormVisible: false,
      isAddStudent: false,
      studentInfo: {},
      token: localStorage.getItem("token"),
      total: 0,
      formInline: {
        studentNumber: '',
        name: '',
        pageSize: 10,
        pageNumber: 1
      },

      tableData: []

    }
  },


}
</script>

<style scoped>

</style>
